<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>【动画进阶】巧用 CSS/SVG 实现复杂线条光效动画</title>
    <link rel="stylesheet" href="../../styles/scss/animation.css" />
  </head>
  <body>
    <div class="eight-container">
      <div>
        <div class="one"></div>
        <!--stroke-dashoffset path 的长度-->
        <div class="two">
          <!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="120 90 280 260">
            <path
              d="M 400 160 A 2 2 90 0 0 260 160 A 2 2 90 0 0 120 160 C 120 230 260 270 260 350 C 260 270 400 230 400 160"
              stroke="#fff"
              stroke-width="10"
              fill="none"
            />
          </svg> -->
          <svg>
            <path
              class="line"
              d="M 400 160 A 2 2 90 0 0 260 160 A 2 2 90 0 0 120 160 C 120 230 260 270 260 350 C 260 270 400 230 400 160"
            />
          </svg>
          <svg>
            <path
              class="line line2"
              d="M 400 160 A 2 2 90 0 0 260 160 A 2 2 90 0 0 120 160 C 120 230 260 270 260 350 C 260 270 400 230 400 160"
            />
          </svg>
        </div>
        <div class="three">
          <!-- 简单loading, 问题在于loading长度固定 -->
          <div></div>
          <!-- 用遮罩实现， -->
          <div></div>
          <!--借助 SVG 的 stroke-* 能力-->

          <div></div>
        </div>
        <div class="four">
          <!--
            stroke-dasharray: 160 520;
              起点默认是从left/top 开始
            stroke-dashoffset: -40;
              改变起点的 对齐点 ，类似于 margin的对齐line
              如果是正值，表现的像是切割了
          -->
          <svg
            width="400"
            height="100"
            viewPort="0 0 400 400"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
          >
            <line stroke-dasharray="5, 5" x1="10" y1="10" x2="390" y2="10" />
            <line
              stroke-dasharray="5, 10, 20"
              x1="10"
              y1="20"
              x2="390"
              y2="20"
            />
            <line
              stroke-dasharray="5, 10, 20"
              stroke-dashoffset="15"
              x1="10"
              y1="30"
              x2="390"
              y2="30"
            />

            <!-- <line
              stroke-dasharray="5, 10, 20, 40"
              x1="10"
              y1="30"
              x2="390"
              y2="30"
            /> -->
            <line stroke-dasharray="0, 400" x1="10" y1="40" x2="390" y2="40" />
            <line
              stroke-dasharray="400, 400"
              x1="10"
              y1="50"
              x2="390"
              y2="50"
            />
          </svg>

          <hgroup class="svg-border-animation">
            <svg
              viewBox="0 0 320 60"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
            >
              <rect class="shape" height="60" width="320"></rect>
            </svg>
            <div class="hover-text">HOVER ME</div>
          </hgroup>
          <hgroup class="circle-load">
            <svg
              width="220px"
              height="220px"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle
                cx="110"
                cy="110"
                r="90"
                stroke-width="10"
                stroke="gainsboro"
                fill="none"
              ></circle>
              <circle
                cx="110"
                cy="110"
                r="90"
                stroke-width="10"
                stroke="darkturquoise"
                fill="none"
                class="circle-load-svg"
              ></circle>
            </svg>
          </hgroup>

          <svg class="cccc" xmlns="http://www.w3.org/2000/svg">
            <rect class="rect rect1" />
          </svg>
          <svg class="cccc" xmlns="http://www.w3.org/2000/svg">
            <rect class="rect rect2" />
          </svg>
          <svg class="cccc" xmlns="http://www.w3.org/2000/svg">
            <rect class="rect rect3" />
          </svg>
        </div>
        <div class="five">
          <svg height="100%" width="100%">
            xmlns="http://www.w3.org/2000/svg">
            <polyline
              points="240 10 140 10 140 90 0 90"
              stroke="#ddd"
              fill="transparent"
              stroke-width="2"
            />
            <polyline
              class="g-dashed-line"
              points="240 10 140 10 140 90 0 90"
              fill="transparent"
              stroke-width="2"
            />
            <polyline
              class="g-shadow"
              points="240 10 140 10 140 90 0 90"
              fill="transparent"
              stroke-width="2"
            />
          </svg>
        </div>
        <div class="six">
          <div></div>
        </div>
      </div>
      <div class="demo five">
        <div class="g-svg">
          <svg height="100%" width="100%">
            xmlns="http://www.w3.org/2000/svg">
            <polyline
              points="240 10 140 10 140 90 0 90"
              stroke="#ddd"
              fill="transparent"
              stroke-width="2"
            />
            <polyline
              class="g-short-line"
              points="240 10 140 10 140 90 0 90"
              fill="transparent"
              stroke-width="2"
            />
            <polyline
              class="g-shadow"
              points="240 10 140 10 140 90 0 90"
              fill="transparent"
              stroke-width="2"
            />
          </svg>
        </div>
        <div class="g-gradient"></div>
        <div class="g-mul-gradient"></div>
        <div class="g-main"></div>
      </div>
    </div>
  </body>
</html>
